<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-11-04 10:09
  PageName：e_StyleOrder_Table.html
  Function：表格CSS样式 - 表格对象样式的层叠顺序
  URL：http://localhost:8080/i_table/i5_style_table/e_StyleOrder_Table.html
-->

<head>
    <meta charset="UTF-8">
    <title>表格CSS样式 - 表格对象样式的层叠顺序</title>

    <style type="text/css">
        body, table, td {
            font-size: 12px;
        }

        table {
            border: solid 2px red;
            position: absolute;
            width: 500px;
            height: 300px;
        }

        th, td {
            border: solid 1px #000;
        }

        .table1 {
            left: 60px;
            top: 60px;
            background: url(images/bg7.jpg);
            border: solid 6px #333;
        }

        .table2 {
            left: 100px;
            top: 90px;
            border: solid 5px #555;
        }

        .table2 colgroup {
            background: url(images/bg4.jpg);
        }

        .table3 {
            left: 140px;
            top: 120px;
            border: solid 4px #777;
        }

        .table3 .col {
            background: url(images/bg8.jpg);
        }

        .table4 {
            left: 180px;
            top: 150px;
            border: solid 3px #777;
        }

        .table4 tbody {
            background: url(images/bg1.jpg);
        }

        .table5 {
            left: 220px;
            top: 180px;
            border: solid 2px #888;
        }

        .table5 .row {
            background: url(images/bg9.jpg);
        }

        .table6 {
            left: 260px;
            top: 210px;
            border: solid 1px #999;
        }

        .table6 .cell {
            background: url(images/bg10.jpg);
        }

    </style>
</head>

<body>
<h1>数据表格内元素层叠优先级</h1>

<!-- 1、Table -->
<table class="table1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

<!-- 2.Colgroup -->
<table class="table2">
    <colgroup>
        <col class="col1">
        <col class="col2">
        <col class="col3">
    </colgroup>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

<!-- 3、Col -->
<table class="table3">
    <colgroup>
        <col class="col">
        <col>
        <col class="col">
    </colgroup>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

<!-- 4. thead、tbody、tfoot -->
<table class="table4">
    <thead>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    </tbody>
</table>

<!-- 5、tr -->
<table class="table5">
    <tr class="row">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="row">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

<!-- 6、td -->
<table class="table6">
    <tr>
        <td class="cell">&nbsp;</td>
        <td>&nbsp;</td>
        <td class="cell">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td class="cell">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="cell">&nbsp;</td>
        <td>&nbsp;</td>
        <td class="cell">&nbsp;</td>
    </tr>
</table>
</body>
</html>